import { useEffect, useMemo, useRef, useState } from "react"
import request from "@/request/index"


type ItemProProps = {
  name: string
  isActive?: boolean
  time?: string
}

const defalutColorClass = 'from-[rgba(113,203,219,1)] to-[rgba(26,74,157,1)]'
const activeColorClass = 'from-[rgba(196,246,255,1)] to-[rgba(196,246,255,1)]'

const ProOption: ItemProProps[] = [
  {
    name: 'xxxx会议保障',
    time: '2023/07/28-2023/08/08'
  },
  {
    name: 'xxxx会议保障',
    time: '2023/07/28-2023/08/08'
  },
  {
    name: '成都大运会保障',
    time: '2023/07/28-2023/08/08'
  },
  {
    name: '2024国庆保障',
    time: '2023/07/28-2023/08/08'
  },
  {
    name: '2025年6月常态化保障',
    time: '2023/07/28-2023/08/08'
  },
  {
    name: '2025年7月常态化保障',
    time: '2023/07/28-2023/08/08',
    isActive: true
  },
  {
    name: '成都世界运动会保障',
    time: '2023/07/28-2023/08/08'
  },
  {
    name: '总计',
  },
]


const getData = async () => {
  const data = await request.getAxios().post('/caict/webAPI/nsap/overview/findOverviewStage',{
    data:{}
  })
  console.log(data, 'dataV');

}




const ItemPro = ({
  name, isActive = false, time
}: ItemProProps) => {

  return <div className="grid flex-col gap-[4px]">
    <div className={`text-[16px] tracking-[2px] font-bold text-transparent bg-clip-text bg-gradient-to-b ${isActive ? activeColorClass : defalutColorClass}`}>{name}</div>
    {
      time ?
        <div
          className="text-[12px] tracking-[0.6px] text-transparent bg-clip-text bg-gradient-to-b from-[rgba(113,203,219,1)] to-[rgba(26,74,157,1)]"
        >
          {time}
        </div> : null
    }
    <div className="w-[14px] h-[14px] bg-[url(@/assets/svg/home-top-radiu.svg)] bg-no-repeat bg-cover justify-self-center"
      style={{
        boxShadow: ' 0px 2px 10px 0px rgba(113, 202, 219, 0.40)'
      }}
    ></div>
  </div>
}





const HomeTop = () => {


  useEffect(() => {
    getData()
  }, [])

  const lineRef = useRef<HTMLDivElement>(null)
  const [width, setWidth] = useState<number>(0)


  const ProLine = useMemo(() => {
    return <div
      className="w-full h-[16px] bg-[#1A499D] rounded-[28.5px] overflow-hidden"
      style={{
        boxShadow: '0px -2px 8px 0px #6CCEE1 inset, 0px 2px 8px 0px #6CCEE1 inset'
      }}
    >
      <div className={`h-[16px] bg-[rgba(113,203,219,1)]`} style={{ width: width + 'px' }}></div>
    </div>
  }, [width])

  useEffect(() => {
    if (!lineRef.current) return
    const index = ProOption.findIndex(item => item.isActive)
    const val: HTMLDivElement[] = lineRef.current?.childNodes[index]?.childNodes as unknown as HTMLDivElement[]
    const ads: HTMLDivElement = val[val.length - 1]

    setWidth(Math.floor(ads.getBoundingClientRect().left) - 24 + 7)
  }, [lineRef])

  return <div className="h-[130px] pb-[14px] flex flex-col justify-between">
    <div className="flex justify-between pt-[16px]" ref={lineRef}>
      {
        ProOption.map((item, index) => {
          return <ItemPro {...item} key={index} />
        })
      }
    </div>
    {ProLine}
  </div>
}

export default HomeTop